.sources-modal-content {
    // keep in sync with variables in SourcesModal.tsx
    $max-content-width: 640px;
    $tab-padding: 8px;
    $tab-font-size: 13px;
    $tab-gap: 8px;
    $tab-title-spacing: 6px;

    $border: $gray-20;

    // necessary for scrolling
    display: flex;
    flex-direction: column;
    height: 100%;
    > * {
        flex-shrink: 0;
    }

    .overlay-header {
        padding-bottom: 6px;
    }

    .scrollable {
        flex: 1 1 auto;
        overflow-y: auto;

        padding: 0 var(--modal-padding) var(--modal-padding);

        &--pad-top {
            padding-top: var(--modal-padding);
        }
    }

    .scrollable .centered {
        max-width: $max-content-width;
        margin: 0 auto;
        width: 100%;
        height: 100%;

        // needed for the loading indicator
        position: relative;
        min-height: 45px;
    }

    .scrollable .centered > .source {
        padding-bottom: var(--modal-padding);
    }

    .close-button--top-right {
        position: absolute;
        top: 0;
        right: 0;
        margin: var(--modal-padding);
    }

    .note-multiple-indicators {
        margin-top: 0;
        color: $light-text;
        font-size: 14px;
        font-style: italic;
        font-weight: 500;
    }

    .sources-modal-tabs {
        margin-bottom: 16px;

        .Tabs__Tab {
            font-size: $tab-font-size;
            padding: 8px $tab-padding;
            margin-right: $tab-gap;

            &[data-selected] .attribution {
                color: $blue-50;
            }
        }

        &.Tabs--variant-scroll .Tabs__Tab {
            max-width: 220px;
        }

        .TabsWithDropdown__Row,
        .TabsWithDropdown__MoreButton {
            gap: $tab-gap;
        }
    }

    .attribution {
        color: $gray-60;
        margin-left: $tab-title-spacing;
    }

    .source {
        color: $light-text;

        --indicator-sources-description-heading: #{$dark-text};
        --indicator-sources-key-data-title: #{$dark-text};
        --indicator-sources-content: #{$light-text};

        --indicator-processing-content-size: 14px;
        --indicator-processing-background: #{$gray-10};
        --indicator-processing-title: #{$dark-text};
        --indicator-processing-content: #{$light-text};

        --data-processing-content-size: 14px;
        --data-processing-content: #{$light-text};

        --expandable-toggle-border: #{$border};
        --expandable-toggle-title: #{$dark-text};
        --expandable-toggle-content: #{$light-text};
        --expandable-toggle-button: #{$dark-text};
        --expandable-toggle-button-hover: #{$light-text};
        --expandable-toggle-title-size: 16px;
        --expandable-toggle-content-size: 14px;

        --non-expandable-title: #{$dark-text};
        --non-expandable-border: #{$border};
        --non-expandable-title-size: 16px;
        --non-expandable-content-size: 14px;

        h2 {
            @include h1-semibold;
            font-size: 24px;
            margin-top: 0;
            margin-bottom: 8px;
            color: $dark-text;

            @include sm-up {
                font-size: 24px;
            }
        }

        .description-below-title {
            @include body-3-medium;
            font-size: 14px;
            color: $dark-text;

            p {
                margin-top: 8px;
                margin-bottom: 16px;
            }

            ul,
            ol {
                padding-left: 1em;
                margin: 1em 0;

                li + li {
                    margin-top: 0.5em;
                }
            }
        }

        .title {
            margin-right: 8px;
        }

        .title-fragments {
            color: $light-text;
            font-size: 20px;
        }

        a {
            color: inherit;
            text-decoration: underline;
            &:hover {
                text-decoration: none;
            }
        }

        .heading {
            @include h2-semibold;
            font-size: 20px;
            margin-top: 32px;
            margin-bottom: 16px;
            color: $dark-text;

            &--tight {
                margin-bottom: 8px;
            }
        }

        .indicator-sources {
            .ExpandableToggle:first-of-type,
            .NonExpandable:first-of-type {
                border-top: none;
                padding-top: 0;

                .ExpandableToggle__button {
                    padding-top: 0;
                }
            }

            &--single .NonExpandable {
                border: none;
                padding: 0;
            }
        }

        .data-processing {
            margin-top: 0;
            margin-bottom: 16px;
        }

        .indicator-processing-callout {
            margin-left: 0;
            margin-right: 0;

            &__title {
                font-size: 12px;
            }
        }

        .ExpandableToggle__content {
            h1,
            h2,
            h3,
            h4,
            h5,
            h6 {
                color: $dark-text;
                font-family: $sans-serif-font-stack;
                font-size: 1em !important;
                margin-top: 14px;
                margin-bottom: 6px;
            }
        }

        .data-citation__item:not(:first-of-type) {
            margin-top: 16px;
        }

        .citation__paragraph {
            color: $light-text;
            font-size: 14px;
        }

        .citation__type {
            display: block;
            line-height: 1.5;
            color: $dark-text;
            font-weight: 500;
            font-size: 14px;
        }

        .indicator-processing .indicator-processing__link {
            @include body-3-medium;
            font-size: 14px;
            display: inline-block;
            height: auto;
            padding: 0;
            text-align: left;
            color: $dark-text;
            background-color: transparent;
            text-decoration: underline;
            text-underline-offset: 4px;

            &:hover {
                text-decoration: none;
            }
        }
    }
}

&.GrapherComponentSmall .sources-modal-content {
    .source {
        --text-small: 13px;

        --indicator-processing-content-size: var(--text-small);
        --data-processing-content-size: var(--text-small);
        --expandable-toggle-title-size: 14px;
        --expandable-toggle-content-size: var(--text-small);
        --non-expandable-title-size: 14px;
        --non-expandable-content-size: var(--text-small);

        h2 {
            font-size: 20px;
        }

        h2 + p {
            font-size: var(--text-small);
        }

        .heading {
            font-size: 18px;
        }

        .indicator-descriptions .key-info {
            --indicator-key-info-content-size: var(--text-small);
            padding: 24px;
        }

        .indicator-descriptions .key-info__learn-more,
        .indicator-processing .indicator-processing__link,
        .citation__paragraph,
        .citation__type {
            font-size: var(--text-small);
        }
    }
}
